{% extends '../_manage.html' %}

{% block title %} {{ _('All Links') }} {% endblock %}

{% block head %}
<script>
$(() => {
    doAsync(
    	async () => {
    		let resp = await getJson('/api/links');
    		return resp.results;
    	},
    	data => initVM(data),
    	err => UIkit.modal.alert(translateError(err))
    );
});

function initVM(links) {
    var vm = new Vue({
        el: '#vm',
        data: {
            links: links
        },
        methods: {
        	copyLink: function (n) {
				// TODO:
			},
            find: function (id) {
            	return this.links.findIndex(n => n.id === id);
            },
            editLink: function (n) {
                location.assign(`/manage/link/link_update?id=${n.id}`);
            },
            deleteLink: function (n) {
                UIkit.modal.confirm(`Link "${n.name}" will be deleted. Continue?`, () => {
                	doAsync(
                		async () => {
                			await postJson(`/api/links/${n.id}/delete`);
                		},
                		() => refresh(),
                		err => UIkit.modal.alert(translateError(err))
                	);
                });
            }
        }
    });
    $('#loading').hide();
    $('#vm').show();
}
</script>
{% endblock %}

{% block main %}

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="loading" class="uk-width-1-1">
        <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
    </div>

    <div id="vm" class="uk-width-1-1">
        <div class="uk-margin">
            <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
            <a href="link_create" class="uk-button uk-button-primary uk-float-right"><i class="uk-icon-plus"></i> {{ _('New Link') }}</a>
        </div>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th width="15%">{{ _('Name') }}</th>
                    <th width="20%">{{ _('Shorten URL') }}</th>
                    <th width="40%">{{ _('URL') }}</th>
                    <th width="15%">{{ _('Created At') }}</th>
                    <th width="10%">{{ _('Action') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="n in links">
                    <td><span v-text="n.name"></span></td>
                    <td>
                    	<a v-bind:href="n.shortenUrl" target="_blank" v-text="n.shortenUrl"></a></td>
					</td>
                    <td><a v-text="n.url" v-bind:href="n.url" target="_blank"></a></td>
                    <td><span v-text="n.createdAt.toDateTime()"></span></td>
                    <td>
                        <a v-on:click="editLink(n)" title="Edit this link" href="#0" class="x-btn"><i class="uk-icon-edit"></i></a>
                        <a v-on:click="deleteLink(n)" title="Delete this link" href="#0" class="x-btn"><i class="uk-icon-trash"></i></a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div v-if="links.length===0" class="x-empty-list">
            <p>No link found.</p>
        </div>
    </div>

{% endblock %}
